<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
	            *{
	                margin: 0px;
	                padding: 0px;
	                list-style: none;
	            }
	            td{
	                border:1px solid #ccc;
	                line-height: 30px;
	                width:150px;
	                text-align: center;
	            }
	            table{
	                border-collapse: collapse;
	                margin:0px auto;
	            }
	            .head{
	                font-weight: bold;
	                font-size: 18px;
	                background:lightblue
	            }
	            input{
	                width: 300px;
	                margin:10px auto;
	                display: block;
	            }
	            button{
	                background:lightblue;
	                width: 300px;
	                display: block;
	                margin:10px auto;
	                border:none;
	                cursor: pointer;
	                line-height: 40px;
	                color:white;
	            }
	            table input{
	                width: 150px;
	                border: none;
	                outline: none;
	                text-align: center;
	            }
	            /* .a{
	                width: 10px;
	                height: 30px;
	                background-size: darkkhaki;
	                border-radius: 50%;
	            }  */
	        </style>
	    </head>
	    <body>
	        <table id="box">
	            <tr class="head">
	                <td>商品名字</td>
	                <td>商品价格</td>
	                <td>商品数量</td>
	                <td>编辑</td>
	                <td>删除</td>
	            </tr>
	            <tr>
	                <td><input type="text" value="华为"></td>
	                <td><input type="text" value="5000"></td>
	                <td><input type="text" value="10"></td>
	                <td onclick="edit(this)" class="a">编辑</td>
	                <td onclick="del(this)" class="a">删除</td>
	            </tr>
	
	        </table>
	        <input type="text" placeholder="输入商品" id="pro">
	        <input type="text" placeholder="输入价格" id="price">
	        <input type="text" placeholder="输入数量" id="shuLiang">
	        <button id="btn">发布商品</button>
	        <script>
	            btn.onclick=function(){
	                if(pro.value==''||price.value==''||shuLiang.value==''){
	                    alert("请输入数据");
	                }else{
	                    var product=pro.value;
	                    var p=price.value;
	                    var pr=shuLiang.value;
	                    var tag=document.createElement('tr');
	                    tag.innerHTML=`<td><input type="text" value="${product}"></td>
	                <td><input type="text" value="${p}"></td>
	                <td><input type="text" value="${pr}"></td>
	                <td onclick="edit(this)" class="a">编辑</td>
	                <td onclick="del(this)" class="a">删除</td>`;
	                    box.appendChild(tag)
	                    pro.value='';
	                    price.value='';
	                    shuLiang.value='';
	                }
	            }
	            function del(a){
	                a.parentNode.parentNode.removeChild(a.parentNode);
	        }
	            function edit(a){
	                        var product=a.parentNode.children[0].children[0];
	                        var value=a.parentNode.children[1].children[0];
	                        var pr=a.parentNode.children[2].children[0];
	                    if(a.innerHTML=='编辑'){
	                        a.innerHTML='确认';
	                        product.removeAttribute('disabled');
	                        value.removeAttribute('disabled');
	                        pr.removeAttribute('disabled');
	                    }else{
	                        a.innerHTML='编辑';
	                        product.disabled='true';
	                        value.disabled='true';
	                        pr.disabled='true';
	                    }
	                
	            }
	        </script>
	    </body>
	</html>